<template>
  <div class="message">
    <div class="card">
      <div class="messagelis" v-for="(v,k) in messagelist" :key="k">
        <div class="flex row_bet col_center" style="padding:20px;">
          <div class="flex ">
            <img :src="v.pic" alt="" style="width: 107px;height:48px;margin-right: 20px;border-radius: 8px;">
            <div>
              <div>
                <span
                  :style="{
                    color:v.status ==1?'#FF0303':'#BABDC1'
                  }">[{{ v.status ==1?'未读':'已读' }}]</span>
                <span>{{ v.title }}</span>
              </div>
              <div style="color:#707377">
                {{ v.time }}
              </div>
            </div>
          </div>
          <div>
            <span style="color:#2396F9;cursor: pointer" @click="goarticle(v)">详情</span>
          </div>
        </div>
        <a-divider style="margin:0"/>
      </div>
    </div>
  </div>
</template>
<script>
  import { getussermsglist } from '@/api/messageApi'

  export default {
    name: 'Message',
    data () {
      return {
        messagelist: [
          // {
          //   id: 10, // 自增id
          //   title: '测试', /// 标题
          //   pic: 'https://detail.tmall.com/item.htm?id=608455384750', // 图片
          //   redirect_url: 'https://detail.tmall.com/item.htm?id=608455384750', // 跳转地址
          //   time: '2020-12-22 14:25:26', // 发布时间
          //   status: 2, // 是否已读 1未读 2已读
          //   content_id: 3, // 文章id
          //   article_title: '测试' // 文章标题
          // }
        ]
      }
    },
    computed: {},
    created () {
      this.getussermsglist(1, 999)
    },
    mounted () {

    },
    methods: {
      goarticle (row) {
        console.log(row)
        this.$router.push(
          {
            path: '/helpcenter/article',
            query: {
              id: row.content_id
            }
          }
        )
      },
      getussermsglist (page, pagesize) {
        getussermsglist({
          page: page,
          pagesize: pagesize
        }).then(res => {
          console.log(res)
          this.messagelist = res.data.data
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>
<style lang='less' scoped>
  .message {
    .card {
      height: 100vh;
      overflow-y: auto;
      border-radius: 6px;
      .messagelis:hover {
        background-color: #F9F9FA;
      }
    }
  }
</style>
